<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<!-- 删除默认的苹果工具栏和菜单栏 ： 即启用 WebApp 全屏模式  -->
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<!-- 在web app应用下状态条（屏幕顶部条）的颜色；默认值为default（白色），可以定为black（黑色）和black-translucent（灰色半透明）若值为“black-translucent”将会占据页面px位置，浮在页面上方（会覆盖页面20px高度–iphone4和itouch4的Retina屏幕为40px）。 -->
		<meta name="apple-mobile-web-app-status-bar-style" content="black" />
		<!-- 忽略数字自动识别为电话号码 ,忽略识别邮箱 -->
		<meta name="format-detection" content="telephone=no, email=no" />
		<!-- 启用360浏览器的极速模式(webkit) -->
		<meta name="renderer" content="webkit">
		<!-- 避免IE使用兼容模式 -->
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<!-- uc强制竖屏 -->
		<meta name="screen-orientation" content="portrait" />
		<!-- QQ强制竖屏 -->
		<meta name="x5-orientation" content="portrait">
		<!-- UC强制全屏 -->
		<meta name="full-screen" content="true" />
		<!-- QQ强制全屏 -->
		<meta name="x5-fullscreen" content="true" />
		<!-- 360强制全屏 -->
		<meta name="360-fullscreen" content="true" />
		<title>引导页</title>
		<link rel="stylesheet" href="css/swiper-4.1.0.min.css" />
		<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
		<style>
			.swiper-container,.swiper-wrapper,.swiper-pagination{
				pading:0px;
				margin:0px;
			}
			.swiper-container{
				width:100%;
				height:100%;
			}
			#fenyeqi{
				position: absolute;
				bottom:2rem;
			}
			.swiper-wrapper>div:nth-of-type(3){
				position: relative;
				display: flex;
				justify-content: center;
			}
			.swiper-wrapper>div:nth-of-type(3)>div{
				position: absolute;
				bottom:0.8rem;
				background:linear-gradient(to bottom,#559ae7,#3a83d4,#4a9af3);
				color:white;
				padding:0.2rem;
				border-radius: 0.1rem;
				font-size: 0.4rem;
			}
		</style>
	</head>

	<body>
		<div class="swiper-container">
			<div class="swiper-wrapper">
				<div class="swiper-slide"><img src="imges/yindaoye1.png" /></div>
				<div class="swiper-slide"><img src="imges/yindaoye2.png" /></div>
				<div class="swiper-slide">
					<img src="imges/yindaoye3.png" />
					<div class="nav">立 即 听 课</div>
				</div>
			</div>
			<!-- 如果需要分页器 -->
			<div id="fenyeqi" class="swiper-pagination"></div>

		</div>
		<script type="text/javascript" src="js/swiper-4.1.0.min.js"></script>
		<script type="text/javascript" src="js/jquery-3.2.1.js"></script>
		<script>
			var mySwiper = new Swiper('.swiper-container', {
				//滑动到最后一页就不在滑动了
				loop: false,
				//设定为true时，active slide会居中，而不是默认状态下的居左。
				centeredSlides : true,
				// 如果需要分页器
				pagination: {
					el: '.swiper-pagination',
					//设置默认小圆点
					type: 'bullets',
				},
				 zoom : true,
			})
			var tw=document.documentElement.clientWidth;
			var th=document.documentElement.clientHeight;
			$(start);
			function start(){
				$(".swiper-slide img").css({"width":tw,"height":th});
				$(".nav").click(
					function(){
						$(location).attr("href","首页.html");
					}
				)
			}
		</script>
	</body>

</html>